<template>
  <div class="view_page userList">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="menu-title">
            全景图管理
          </div>
        </div>
        <!--右侧-->
        <div class="right">
          <el-button type="primary" size="small" @click="exportxlsx">
            导出
          </el-button>
          <el-button type="primary" size="small" @click="navtoAdd('add')">
            新增
          </el-button>
        </div>
      </div>
      <!-- 卡片内容 -->
      <div>
        <!--筛选-->
        <div class="query-operate">
          <el-form
              class="demo-form-inline indoor-scene-buzhou-list-form"
              :inline="true"
              :model="TESTFROMDATA"
              @submit.native.prevent
          >
            <el-form-item
                label="全景图名称"
                label-width="120px"
                style="margin-top: 5px; margin-bottom: 5px;"
            >
              <el-input
                  clearable
                  @clear="searchList"
                  v-model="TESTFROMDATA.title"
                  @keyup.native.enter="searchList()"
              ></el-input>
            </el-form-item>

            <el-form-item
                label="拍摄时间"
                label-width="120px"
                style="margin-top: 5px; margin-bottom: 5px;"
            >
              <el-date-picker class="date-range-select"
                              v-model="TESTFROMDATA.dateRange" type="daterange"
                              range-separator="~" value-format="yyyy-MM-dd"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :picker-options="datePickerOptions"
                              @change="updateSearchDateSelected"
                              :default-value="timeDefaultShow">
              </el-date-picker>
            </el-form-item>

            <el-form-item
                style="margin-top: 5px; margin-bottom: 5px;margin-left: 10px;">
              <el-button type="primary" @click="searchList()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table :data="datalist" style="width: 100%">
          <!-- <el-table-column prop="id" label="ID" align="center" min-width="100">
          </el-table-column> -->
          <el-table-column
              prop="id"
              label="序号"
              align="center"
              min-width="100"
          >
            <template slot-scope="scope">
              <div>
                {{ (pageNum - 1) * size + (scope.$index + 1) }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
              prop="url_thumb"
              label="封面图"
              align="center"
              min-width="160"
          >
            <template slot-scope="scope">
              <img
                  :src="scope.row.url_thumb"
                  alt=""
                  width="80px"
                  height="80px"
                  style="object-fit: cover;"
                  v-if="scope.row.url_thumb != ''&&scope.row.url_thumb!=null"
              />
              <img
                  src="https://dongping.jnaw.top/dongping_static/defaultImg.png"
                  alt=""
                  width="80px"
                  height="80px"
                  style="object-fit: cover;"
                  v-else
              />
            </template>
          </el-table-column>
          <el-table-column
              prop="title"
              label="全景图名称"
              align="center"
              min-width="100"
          >
          </el-table-column>
          <el-table-column
              prop="lon"
              label="经度"
              align="center"
              min-width="100"
          >
          </el-table-column>
          <el-table-column
              prop="lat"
              label="纬度"
              align="center"
              min-width="100"
          >
          </el-table-column>
          <el-table-column
              prop="take_height"
              label="拍摄高度(m)"
              align="center"
              min-width="120"
          >
          </el-table-column>
          <el-table-column
              prop="shoot_time"
              label="拍摄时间"
              align="center"
              min-width="100"
          >
          </el-table-column>
<!--          <el-table-column
              prop="json_pro"
              label="工程"
              align="center"
              min-width="100">
            <template slot-scope="scope">
              <el-popover width="" trigger="hover" placement="top"
                          popper-class="u_my_popover">
                <div style="white-space: pre-line;">
                  <span v-for="(it,ii) in scope.row['json_pro']"
                        :key="ii">{{
                      (ii != 0 ? (', ' + (it.pro_name || '')) : (it.pro_name || ''))
                    }}</span>
                </div>
                <div slot="reference" class="name-wrapper">
                  <div class="text-ellipsis-2" style="white-space: pre-line;">
                    <span v-for="(it,ii) in scope.row['json_pro']"
                          :key="ii">{{
                        (ii != 0 ? (', ' + (it.pro_name || '')) : (it.pro_name || ''))
                      }}</span>
                  </div>
                </div>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column
              prop="json_rivers"
              label="地区"
              align="center"
              min-width="100">
            <template slot-scope="scope">
              <el-popover width="" trigger="hover" placement="top"
                          popper-class="u_my_popover">
                <div style="white-space: pre-line;">
                  <span v-for="(it,ii) in scope.row['json_rivers']"
                        :key="ii">{{
                      (ii != 0 ? (', ' + (it.river_name || '')) : (it.river_name || ''))
                    }}</span>
                </div>
                <div slot="reference" class="name-wrapper">
                  <div class="text-ellipsis-2" style="white-space: pre-line;">
                    <span v-for="(it,ii) in scope.row['json_rivers']" :key="ii">{{
                        (ii != 0 ? (', ' + (it.river_name || '')) : (it.river_name || ''))
                      }}</span>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
              prop="is_user"
              label="是否用户上传"
              align="center"
              min-width="120"
          >
            <template slot-scope="scope">
              <div>
                <el-tag type="danger" v-if="scope.row.is_user=='0'">否</el-tag>
                <el-tag v-if="scope.row.is_user=='1'">是</el-tag>
              </div>
            </template>
          </el-table-column>-->
          <el-table-column
              fixed="right"
              label="操作"
              min-width="300"
              align="center"
          >
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;flex-wrap: wrap; ">
                <el-button
                    type="success"
                    size="small"
                    @click="toquery(scope.row.id)"
                >详情
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="navtoAdd('update', scope.row.id)"
                >修改
                </el-button>
                <el-button type="danger" size="small" @click="del(scope.row)"
                >删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination
            :total="total"
            :currentPage="pageNum"
            :pageSize="size"
            position="right"
            @search="searchPagination"
        >
        </pagination>
      </div>
    </el-card>
    <el-table :data="all_datalist"
              style="width: 100%;position: absolute;top: 10000px;" ref="myTable"
              id='panoramaManageTable' v-show='false'>
      <el-table-column prop="index" label="序号" align="center" min-width="50">
        <template slot-scope="scope">
          <div>
            {{ (pageNum - 1) * size + (scope.$index + 1) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="全景图名称" align="center"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="lon" label="经度" align="center" min-width="100">
      </el-table-column>
      <el-table-column prop="lat" label="纬度" align="center" min-width="100">
      </el-table-column>
      <el-table-column prop="take_height" label="拍摄高度(m)" align="center"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="shoot_time" label="拍摄时间" align="center"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="json_pro" label="工程" align="center"
                       min-width="100">
        <template slot-scope="scope">
          <div>
            <span v-for="(it,ii) in scope.row['json_pro']"
                  :key="ii">{{
                (ii != 0 ? (', ' + (it.pro_name || '')) : (it.pro_name || ''))
              }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="json_rivers" label="地区" align="center"
                       min-width="100">
        <template slot-scope="scope">
          <div>
            <span v-for="(it,ii) in scope.row['json_rivers']"
                  :key="ii">{{
                (ii != 0 ? (', ' + (it.river_name || '')) : (it.river_name || ''))
              }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="is_user" label="是否用户上传" align="center"
                       min-width="120">
        <template slot-scope="scope">
          <div>
            <el-tag type="danger" v-if="scope.row.is_user=='0'">否</el-tag>
            <el-tag v-if="scope.row.is_user=='1'">是</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {Message} from "element-ui";
import pagination from "@/components/common/pagination/pagination";
import devConfig from "*/dev.config";
// 导入excel依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  components: {
    pagination
  },
  watch: {
    total: {
      handler(newVal, oldVal) {
        this.total = newVal || 0;
        if (this.total <= 0) {
          return;
        }
        let datas = {
          page: 1,
          size: this.total,
        };
        if (this.TESTFROMDATA.title) {
          Object.assign(datas, {
            title: this.TESTFROMDATA.title || '',
          })
        }
        if (this.TESTFROMDATA.dateRange && this.TESTFROMDATA.dateRange.length > 0) {
          let startTime = this.TESTFROMDATA.dateRange[0] || '';
          let endTime = this.TESTFROMDATA.dateRange[1] || '';
          Object.assign(datas, {
            start_time: startTime,
            end_time: endTime,
          })
        }

        this.$apis.panorama_unity_list_new(datas).then(res => {
          if (res.result == 0) {
            this.all_datalist = res.data;
          }
        });
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      // 筛选内容
      TESTFROMDATA: {
        title: "",
        engine1: "",
        engine2: "",
        river1: "",
        river2: "",
        dateRange: [],
      },
      timeDefaultShow: new Date(),
      datePickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },

      // 列表的数据
      all_datalist: [],
      datalist: [],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0,
      villageValue: [],
      villageOptions: [],
      props: {
        multiple: false,
        checkStrictly: false,
        value: "id",
        label: "name"
      }
    };
  },
  created() {
    // const end = new Date();
    // const start = new Date();
    // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    // const endDate = this.formatDateTime(end);
    // const startDate = this.formatDateTime(start);
    // this.TESTFROMDATA.dateRange = [startDate, endDate];
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
    this.page = localStorage.getItem("page");
    // console.log(this.page)
    this.getListPage();
    this.village_list();
  },
  mounted() {
  },
  methods: {
    // 时间处理
    formatDateTime(inputTime, split = '-') {
      const date = inputTime ? new Date(inputTime) : new Date();
      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? `0${m}` : m;
      let d = date.getDate();
      d = d < 10 ? `0${d}` : d;
      // let h = date.getHours();
      // h = h < 10 ? `0${h}` : h;
      // let minute = date.getMinutes();
      // let second = date.getSeconds();
      // minute = minute < 10 ? `0${minute}` : minute;
      // second = second < 10 ? `0${second}` : second;
      let res = `${y}-${m}-${d}`;
      if (split == '/') {
        res = `${y}/${m}/${d}`
      } else if (split == '中') {
        res = `${y}年${m}月${d}日`;
      }
      return res;
    },
    updateSearchDateSelected(val) {
      console.log(val)
      this.getListPage();
    },
    village_list() {
      this.$apis.county_village_xxc_list().then(res => {
        if (res.result == 0) {
          let tt = res.data;
          this.villageOptions = tt[0].children;
        }
      });
    },
    //查询列表
    getListPage() {
      let datas = {
        page: this.page,
        size: this.size,
        engine1: "",
        engine2: "",
        river1: "",
        river2: "",
        title: this.TESTFROMDATA.title,
      };
      if (this.TESTFROMDATA.dateRange && this.TESTFROMDATA.dateRange.length > 0) {
        let startTime = this.TESTFROMDATA.dateRange[0] || '';
        let endTime = this.TESTFROMDATA.dateRange[1] || '';
        Object.assign(datas, {
          start_time: startTime,
          end_time: endTime,
        })
      }

      this.$apis.panorama_unity_list_new(datas).then(res => {
        if (res.result == 0) {
          this.datalist = res.data;
          console.log('list===', this.datalist)
          this.total = res.rows;
          this.pageNum = res.page;
          localStorage.setItem("page", 1);
        }
      });
    },

    //模糊查询
    searchList() {
      this.page = 1;
      this.datalist = [];
      this.getListPage();
    },
    handleChangeVillageSelected() {
      var _this = this;
      // console.log(_this.villageValue[0])
      this.type = _this.villageValue[1];
    },
    //分页
    searchPagination(page) {
      this.page = page;
      localStorage.setItem("page", page);
      this.getListPage();
    },

    //跳转新增
    navtoAdd(type, item) {
      var _this = this;
      localStorage.setItem("page", this.page);
      if (type == "add") {
        _this.$router.push({
          path: "/admin/panoramaManage/panoramaAddTwo",
          query: {
            type: type
          }
        });
      } else {
        var datas = {
          id: item
        };
        _this.$apis.panorama_unity_batch_query(datas).then(res => {
          if (res.result == 0) {
            _this.$router.push({
              path: "/admin/panoramaManage/panoramaAddTwo",
              query: {
                type: type,
                data: res.data
              }
            });
          }
        });

        // _this.$router.push({
        //   path: "/admin/panoramaManage/panoramaAddTwo",
        //   query: {
        //     type: type,
        //     data: _this.datalist[0]
        //   }
        // });
      }
    },
    toquery(item) {
      var _this = this;
      localStorage.setItem("page", this.page);
      var datas = {
        id: item
      };
      _this.$apis.panorama_unity_batch_query(datas).then(res => {
        if (res.result == 0) {
          _this.$router.push({
            path: "/admin/panoramaManage/panoramaDetial",
            query: {
              data: res.data
            }
          });
        }
      });

      // _this.$router.push({
      //   path: "/admin/panoramaManage/panoramaDetial",
      //   query: {
      //     // type: type,
      //     data: _this.datalist[0]
      //   }
      // });
    },
    topanorama(item) {
      var _this = this;
      _this.$router.push({
        path: "/admin/panoramaManange/panoramaManange",
        query: {
          type_id: item,
          type: 7
        }
      });
    },

    download() {
      window.open("https://xiaoyoushengxue.com/2022051218194530.xlsx");
    },

    downloaddata() {
      var _this = this;

      window.open(
          devConfig.apiPrefix +
          "/excel/user_all_export?user_role=" +
          _this.TESTFROMDATA.type
      );
    },
    //删除
    del(item) {
      var _this = this;
      var datas = {
        id: item.id
      };

      _this
          .$confirm("确定要删除【" + item.title + "】吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            _this.$apis.panorama_unity_del_new(datas).then(res => {
              if (res.result == 0) {
                Message.success("删除成功");
                if (this.page > 1 && this.datalist.length <= 1) {
                  this.page = this.page - 1;
                }
                _this.getListPage();
              }
            });
          })
          .catch(() => {
          });
    },
    exportxlsx() {
      // const tt = document.querySelector('#tab2')

      // const dd = tt.cloneNode(true);
      //  dd.setAttribute('id', 'tab1');
      // console.log(dd)
      const wb = XLSX.utils.table_to_book(document.querySelector('#panoramaManageTable'), {
        raw: true // 如果表格里有数字、日期这些、需要加上raw: true
      });
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });
      // console.log(wbout)
      try {
        FileSaver.saveAs(
            // Blob 对象表示一个不可变、原始数据的类文件对象
            new Blob([wbout], {type: 'application/octet-stream'}),
            // 设置导出文件名称
            "全景图管理.xlsx"
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },
  }
};
</script>

<style>
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}
</style>
